﻿<template>
	<div style="padding:0px;">
		<el-form :model="dialogForm" :rules="rules" ref="dialogForm" v-if="dialogSendData.isAdd||!isList" :label-width="formLabelWidth">
			<el-card class="box-card">			  
			  <div  class="text item">				
				  	<div slot="header" class="clearfix">
			          <span style="line-height: 30px;">回款单</span>
			        </div>
			        <el-form-item label="订单号" >
				      <el-input v-model="orderDetail.orderNumber" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="经销商名称" >
				      <el-input v-model="orderDetail.dealerName" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="汽车车型" >
				      <el-input v-model="orderDetail.carName" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="垫资金额" >
				      <el-input :value="(orderDetail.paymentAmount-0) | toFixed2" auto-complete="off" disabled></el-input>
				      <span class="convertCurrency">{{orderDetail.paymentAmount|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="垫资日期" >
				      <el-input :value="orderDetail.interestStartDate | parseTime" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="垫资周期" >
				      <el-input v-model="orderDetail.description" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="垫资利率" >
				      <el-input :value="orderDetail.interestRate | toFixed4" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="逾期利率" >
				      <el-input value="20.0000" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="利息" >
				      <el-input :value="(orderDetail.interest-0) | toFixed2" auto-complete="off" disabled></el-input>
				      <span class="convertCurrency">{{orderDetail.interest|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="逾期费" >
				      <el-input :value="(orderDetail.exceed-0) | toFixed2" auto-complete="off" disabled></el-input>
				      <span class="convertCurrency">{{(orderDetail.exceed-0)|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="总天数" >
				      <el-input v-model="orderDetail.sumDay" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="未逾期天数" >
				      <el-input v-model="orderDetail.unOverDay" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="逾期天数" >
				      <el-input v-model="orderDetail.overDay" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="已还本金" >
				      <el-input :value="(orderDetail.backAmount-0) | toFixed2" auto-complete="off" disabled></el-input>
				      <span class="convertCurrency">{{orderDetail.backAmount|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="已还利息" >
				      <el-input :value="(orderDetail.returnInterest-0) | toFixed2" auto-complete="off" disabled></el-input>
				      <span class="convertCurrency">{{orderDetail.returnInterest|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="已还逾期费" >
				      <el-input :value="(orderDetail.returnExceed-0) | toFixed2" auto-complete="off" disabled></el-input>
				      <span class="convertCurrency">{{orderDetail.returnExceed|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="待还款金额" >
				      <el-input :value="(orderDetail.returnMoney-0) | toFixed2" auto-complete="off" disabled></el-input>
				      <span class="convertCurrency">{{orderDetail.returnMoney|convertCurrency}}</span>
				    </el-form-item>
				</div>
			</el-card>
		    <el-card class="box-card" style="margin-top:15px;">			  
			  <div  class="text item">				
				  	<div slot="header" class="clearfix">
			          <span style="line-height: 30px;">回款信息</span>
			        </div>
				    <el-form-item label="还款总额" >
				      <el-input :value="((dialogForm.capital-0) + (dialogForm.interest-0) + (dialogForm.exceed-0) )|toFixed2" auto-complete="off" disabled></el-input>
				      <span class="convertCurrency">{{((dialogForm.capital-0) + (dialogForm.interest-0) + (dialogForm.exceed-0) )|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="还款本金"  prop="capital">
				      <el-input :maxlength="11" v-model="dialogForm.capital" auto-complete="off" @blur="FormatTwo('capital')" :disabled="!dialogSendData.isAdd"></el-input>
				      <span class="convertCurrency">{{dialogForm.capital|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="利息"  prop="interest">
				      <el-input :maxlength="11" v-model="dialogForm.interest" auto-complete="off" @blur="FormatTwo('interest')" :disabled="!dialogSendData.isAdd"></el-input>
				      <span class="convertCurrency">{{dialogForm.interest|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="逾期费"  prop="exceed">
				      <el-input :maxlength="11" v-model="dialogForm.exceed" auto-complete="off" @blur="FormatTwo('exceed')" :disabled="!dialogSendData.isAdd"></el-input>
				      <span class="convertCurrency">{{dialogForm.exceed|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="还款状态"  v-if="dialogSendData.isAdd">
				        <el-checkbox v-model="dialogForm.isFinish">是否已结清</el-checkbox>
				    </el-form-item>
				    <el-form-item label="差异调整金额"  prop="discrepancyMoney">
				      <el-input v-model="dialogForm.discrepancyMoney" auto-complete="off" @blur="FormatTwo('discrepancyMoney')" :disabled="!dialogSendData.isAdd"></el-input>
				      <span class="convertCurrency">{{dialogForm.discrepancyMoney|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="差异调整原因" >
				      <el-input v-model="dialogForm.discrepancyRemark" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
				    </el-form-item>
				    <el-form-item label="还款银行卡"  prop="bankNumber">
				      <el-input v-model="dialogForm.bankNumber" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
				    </el-form-item>
				    <el-form-item label="还款日期"  prop="repaymentDate">
				      <el-date-picker :editable="false"   style="width:100%;"
					      v-model="dialogForm.repaymentDate"
					      type="datetime"
					      format="yyyy-MM-dd HH:mm:ss"
					      placeholder="选择还款日期"
					      :disabled="!dialogSendData.isAdd"
					      :picker-options="startDateOpt"
					      >
					    </el-date-picker>
				    </el-form-item>
				    <el-form-item label="银行流水编号"  prop="bankTransaction">
				      <el-input v-model="dialogForm.bankTransaction" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
				    </el-form-item>
				    <el-form-item label="还款备注"  >
				      <el-input type="textarea" :rows=3 v-model="dialogForm.repaymentRemark" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
				    </el-form-item>				   
				</div>
			</el-card>
			<div style="text-align:right;margin-top:15px;">
				 <el-button v-if="dialogSendData.isAdd" @click="returnBack">返 回</el-button>
				 <el-button v-if="!dialogSendData.isAdd" @click="returnBackList">返 回</el-button>
				 <el-button v-if="dialogSendData.isAdd" type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
			</div>
		</el-form>
		<div id="dialogTableBox" v-if="!dialogSendData.isAdd&&isList">
			<el-table :data="dialogTableData.data" border  >
			    <el-table-column label="订单号" width="140" fixed>
			      <template scope="scope">
			        <span >{{ scope.row.orderNumber }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="还款总额" width="140">
			      <template scope="scope">
			        <span >{{ (scope.row.capital + scope.row.interest + scope.row.exceed + scope.row.discrepancyMoney) | toFixed2 }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="还款本金" width="140">
			      <template scope="scope">

			        <span >{{ scope.row.capital | toFixed2 }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="利息" width="140">
			      <template scope="scope">
			        <span >{{ scope.row.interest | toFixed2 }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="逾期费" width="140">
			      <template scope="scope">
			        <span >{{ scope.row.exceed | toFixed2 }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="差异调整金额" width="140">
			      <template scope="scope">
			        <span >{{ scope.row.discrepancyMoney | toFixed2 }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="差异调整原因" :min-width="140">
			      <template scope="scope">
			        <span >{{ scope.row.discrepancyRemark }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="还款银行卡" :min-width="200">
			      <template scope="scope">
			        <span >{{ scope.row.bankNumber }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="还款日期" :min-width="180">
			      <template scope="scope">
			        <span >{{ scope.row.repaymentDate | parseTime}}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="银行流水编号" :min-width="200">
			      <template scope="scope">
			        <span >{{ scope.row.bankTransaction }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="还款备注" :min-width="150">
			      <template scope="scope">
			        <span >{{ scope.row.repaymentRemark }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="操作" width="90" :fixed="dialogTableData.data&&dialogTableData.data.length>0?'right':false">
			      <template scope="scope">
			      	<el-button size="small" @click="handleSee(scope.$index, scope.row)">查看</el-button>
			      </template>
			    </el-table-column>
			</el-table>
			<div class="block" style="text-align: center;margin-top: 15px;">
			    <pagination v-on:refreshSeachData="selectData"  :tableData="dialogTableData" ></pagination>
			</div>
			<div style="text-align:right;margin-top:15px;">
				 <el-button @click="returnBack">返 回</el-button>
			</div>
		</div>		
	</div>
</template>
<script>
    import pagination from '@/views/pagination/index'
    import agentHttp from '@/utils/agentHttp.js'//引用JS
    import {require,decimalTwo,decimal} from '@/utils/rules.js'
	export default{
		created(){
			if(this.dialogSendData.isAdd){
				this.getOrderDetail();
			}else{
				this.selectData();	
			}			   
        },
		props:['dialogSendData','tableData'],
		components:{pagination},
		data(){			
			return{
				isList:true,
				formLabelWidth:'170px',
				//弹窗或者查看页面信息
		        dialogForm:{
		        	repaymentDate:'',
		        	isFinish:false,
		        	capital:"",
		        	interest:"",
		        	discrepancyMoney:"",
		        	exceed:""

		        },
		        rules: {	  
		            'capital':[require('还款本金',{trigger:"blur"}),{ validator: decimalTwo, trigger: "blur"}],  
		            'interest':[require('利息',{trigger:"blur"}),{ validator: decimalTwo, trigger: "blur"}],
		            'exceed':[require('逾期费',{trigger:"blur"}),{ validator: decimalTwo, trigger: "blur"}],
		            'repaymentDate':[require('还款日期',{trigger:"blur",type:"date"})],
		            'bankTransaction':[require('银行流水编号',{trigger:"blur"}),{ validator: decimal, trigger: "blur"}],
		            'discrepancyMoney':[{ required:false }],   
		            'bankNumber':[{ required:false }]
		        },
		        dialogTableData:[{		        	
		        }],
		        orderDetail:'',
		        startDateOpt: {
			        disabledDate(time) {
			          return time.getTime() > Date.now() 
			        }
			    }		        
			}
		},methods:{
			submitConfirmForm(formName){
                this.$refs[formName].validate((valid) => {
		          if (valid) {		          	
		            this.addData();		          	
		          } else {
		            this.$nextTick(()=>{
		          		this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText||"提交失败");
		                return false;
		          	})
		          }
		        });
			},		    
		    addData(){
		    	this.dialogForm.carOrderId = this.dialogSendData.id;
		        agentHttp.postJson('adminApi/admin/order_repayment/add',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData', null);
		            	this.$message.success(data.data||"提交成功");
		            	setTimeout(()=>{
		            		this.dialogSendData.dialogFormVisible=false;
		            	},500);
		            } 
		        }) 
		    },
		    //初始化数据
		    selectData(){
		    	var params=this.searchForm||{};
				params.page=this.dialogTableData.page||1;
				params.rows=this.dialogTableData.rows||10;
		        agentHttp.get('adminApi/admin/order_repayment/query_by_order_id/'+this.dialogSendData.id+'?page='+params.page+'&rows='+params.rows).then((data)=>{	
		            this.dialogTableData=data;
		        }) 
		    },
			returnBackList(){
				this.isList=true;
			},
			handleSee(index, row){
                this.isList=false;
                this.getOrderDetail();
                this.getOrderRepayment(row.id);
			},
			returnBack(){
				this.dialogSendData.dialogFormVisible=false;
			},
			//订单详细信息
		    getOrderDetail(){
		        agentHttp.get('adminApi/admin/order_repayment/view/'+this.dialogSendData.id).then((data)=>{		            
		            if (data.success) {
			          this.orderDetail=data.data;  
			        }
		        }) 
		    },		    
		    //回款单信息
		    getOrderRepayment(id){
		        agentHttp.get('adminApi/admin/order_repayment/get/'+id).then((data)=>{			            
		            if (data.success) {
			          this.dialogForm=data.data;
			          this.dialogForm.repaymentDate=new Date(this.dialogForm.repaymentDate||"");
			          this.FormatTwo('capital');
			          this.FormatTwo('interest');
			          this.FormatTwo('exceed');
			        }
		        }) 
		    },
		    FormatTwo(val){
                this.dialogForm[val] = ((this.dialogForm[val]||"")-0).toFixed(2);
		    }
		}
	};	
</script>